<template>
  <div class="center">
    <Nav :title="title" :back="back"></Nav>
    <div class="top">
      <img class="headIcon" src="../assets/images/109951165426046548.jpg" alt />
      <div class="userName">zz</div>
      <van-button class="btn" plain type="info" @click="logout">退出登录</van-button>
    </div>
    <van-tabs v-model="active" class="menu">
      <van-tab title="我的收藏">
        <div class="item">
          <movieItem v-for="item in value.collectsMovies" :key="item._id" :value="item"></movieItem>
        </div>
      </van-tab>
      <van-tab title="历史记录">
        <div class="item">
          <movieItem v-for="item in movieHistory" :key="item._id" :value="item"></movieItem>
        </div>
      </van-tab>
    </van-tabs>
    <TabBar></TabBar>
  </div>
</template>
<script>
import logout from "../models/logout";
import user from "../models/user";
import { Toast } from "vant";
import movieItem from "../components/MovieItem";
export default {
  data() {
    return {
      title: "文与字",
      back: "/",
      active: 0,
      value: {},
      movieHistory: []
    };
  },
  components: {
    movieItem
  },
  async mounted() {
    let loginAuth = this.$cookie.get("loginAuth");
    let id = this.$cookie.get("userID");
    // 当已经登录了
    if (loginAuth && id) {
      var data = await user(loginAuth, id);
      this.value = data.data.res[0];
      // 处理历史记录，最多6条
      this.movieHistory = data.data.res[0].historyMovies.reverse().slice(0, 6);
    }
  },
  methods: {
    async logout() {
      await logout();
      Toast.success({
        message: "已退出登录",
        duration: 1000,
        onOpened: () => {
          console.log(666);
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>
<style scoped>
.top {
  display: flex;
  align-items: center;
  padding: 50px;
}
.headIcon {
  width: 200px;
  border-radius: 50%;
  margin-right: 30px;
}
.btn {
  margin: 0;
  margin-left: auto;
  padding: 30px !important;
  border-radius: 20px;
}
.userName {
  font-size: 50px;
}
.item {
  margin-top: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}
</style>